import { Menu } from 'antd';
import { useDispatch } from 'react-redux';
import { addPath } from "@/redux/actions/index"
import "./index.less"
import { useNavigate } from "react-router-dom"
import { items, findItem, MenuItem, findRoute } from "./config"
import type { MenuProps, } from 'antd';
import { useStore } from 'react-redux'
import { MenuInfo } from 'rc-menu/lib/interface';

export default function MyMenu(props: any) {
    const router = useNavigate()
    const store: any = useStore()
    let user = JSON.parse(sessionStorage.getItem("user") as string)
    let account :any;
    if (user) {
        account = user.account
    }
    const dispatch = useDispatch()
    const handlerUrl: MenuProps['onClick'] = (Event: MenuInfo) => {
        props.handlerUrl(Number(Event.key))
        props.handlerLabel(Event.key)
        let path = items(account).find((item: MenuItem) => item != null && Event.keyPath.indexOf(item.key as string) != -1)
        let chooseItem = findItem(path, Event?.key)
        const pathRoute = findRoute(Event.key)
        let newLabel = { ...chooseItem, path: pathRoute, ...Event }
        dispatch(addPath(newLabel))
        let labelList = store.getState()?.pathReducer
        let index = labelList.findIndex((item: any) => item.key == Event.key)
        props.handlerChoose(index)
    }

    const goHome = () => {
        router("/home")
    }
    return (
        <div className={`${props.collapsed ? "home_left_collspae" : ''} home_left flex_j_c`}>
            <div className={` home_logo flex_a`} onClick={goHome} >
                <img src="/image/react.svg" alt="" />
                <span className={`${props.collapsed ? "home_collspae_min" : ""} logo_name`}>客户管理系统</span>
            </div>
            <div className='home_menu'>
                <Menu
                    defaultSelectedKeys={['1']}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={props.collapsed}
                    items={items(account)}
                    onClick={handlerUrl}
                    selectedKeys={props.keyPath}
                />
            </div>
        </div>
    )
}